var lis = document.querySelectorAll(".nav ul li");
var t = ["recommend","hot","search"];
var domain = "https://www.easy-mock.com";
var main_div=document.querySelectorAll(".main>div");
var song_list_ul=document.querySelector(".song_list_ul");
var new_song_ul=document.querySelector(".new_song");
var hot_song_ul=document.querySelector(".hot_song");
var hot_content=document.querySelector(".hot_content");
var kaiguan1=true;
var kaiguan2=true;
function cloud(t) {
	var url = "/mock/5ab380b6ca15e11ded65b547/wymusic/cloudmusic";
	var xhr = new XMLHttpRequest;
	xhr.open("GET", domain + url);
	switch(t) {
		case "recommend":
			xhr.setRequestHeader("Authorization", "recommend");
			xhr.send()
			xhr.addEventListener("readystatechange", function() {
				if(xhr.readyState == 4 && xhr.status == 200) {
					var song_Obj=JSON.parse(xhr.response)
					var song_list=song_Obj.data.musicInfo.song_list;
					var result=song_Obj.data.musicInfo.result;
					var tmp="";
					function r(index){
						return `
						<li>
							<div class="img_warp">
								<a href="${song_list[index].a_url}"><img src="${song_list[index].img_url}" alt="" /></a>
							</div>
							<div class="li_ab">
								<span>${song_list[index].amount_of_play}</span>
							</div>
							<h3><a href="${song_list[index].a_url}">${song_list[index].title}</a></h3>
						</li>
						`
					}
					for(var j=0;j<song_list.length;j++){
						tmp+=r(j);
					}
					song_list_ul.innerHTML=tmp;
					//以下为最新
					var tmp2="";
					function s(index){
						return `
							<li>
								<div class="new_song_left" id="new_song_left">
									<h3 class="com_hid">
										${result[index].name}
										<span id="" class="song_span">
											${result[index].song.alias}
										</span>
									</h3>
									<p class="com_hid">${test(result[index].song.artists)} </p>
								</div>
								<div class="new_song_right"></div>
							</li>
							`
					}
					for(var j=0;j<result.length;j++){
						tmp2+=s(j);
					}
					new_song_ul.innerHTML=tmp2;
				}
			})
			break;
		case "hot":
			//热歌榜
			xhr.setRequestHeader("Authorization", "hot");
			xhr.send()
			xhr.addEventListener("readystatechange", function() {
				if(xhr.readyState == 4 && xhr.status == 200 &&kaiguan1) {
					kaiguan1=false;
					var song_Obj=JSON.parse(xhr.response)
					var hot_song=song_Obj.data.musicInfo.tracks;
					var tmp="";
					hot_song.forEach(function(el,index){
						tmp+=`<li>
								<div class="num">${num(index)}</div>
								<div class="new_song_left" id="new_song_left">
									<h3 class="com_hid">
										${el.name}
										<span id="" class="song_span">
											
										</span>
									</h3>
									<p class="com_hid">${test(el.ar)}  ${el.alia}</p>
								</div>
								<div class="new_song_right"></div>
							</li>`
					})
					var cdf=document.createDocumentFragment();//创建文档碎片
					var hot_songbox=document.createElement("ul");
					hot_songbox.classList.add("com_list","hot_song");
					hot_songbox.innerHTML=tmp;
					cdf.appendChild(hot_songbox);
					hot_content.appendChild(cdf);
				}
			})
			break;
		case "search":
			xhr.setRequestHeader("Authorization", "search");
			xhr.send()
			xhr.addEventListener("readystatechange", function() {
				if(xhr.readyState == 4 && xhr.status == 200 &&kaiguan2) {
					kaiguan2=false;
					var song_Obj=JSON.parse(xhr.response)
					var search=song_Obj.data.musicInfo.hots;
					console.log(search)
					var tmp="";
					search.forEach(function(el,index){
						tmp+=`
							<li><a href="">${el.first}</a></li>
						`
					})
					var cdf=document.createDocumentFragment();
					var search_ul=document.createElement("ul");
					search_ul.classList.add("list");
					search_ul.innerHTML=tmp;
					cdf.appendChild(search_ul);
					var s_section=document.querySelector(".search_song section");
					s_section.appendChild(cdf)
					console.log(search_ul)
				}
			})
			break;
	}
}
cloud(t[0]);//先执行点击
lis.forEach(function(el,index){
	el.addEventListener("click",function(){
		remove(main_div,"div_active");
		remove(lis,"li_active");
		add(main_div[index],"div_active")
		add(lis[index],"li_active")
		cloud(t[index]);
	})
})
function remove(arr,act){
	for(let i=0;i<arr.length;i++){
		arr[i].classList.remove(act);
	}
}
function add(el,act){
	el.classList.add(act);
}
//歌手名处理
function test(resitem){
	var ttt="";
	resitem.forEach(function(ele){
		ttt+=`${ele.name}`;
	})
	return ttt;
}
//排序处理加工
function num(index){
	if(index<10){
		return "0"+index;
	}else{
		return index;
	}
}
